<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" id="num1">
  <input type="text" id="sign">
  <input type="text" id="num2">
  =
  <input type="text" id="result">
  <button class="btn">计算</button>
  <script>
    var oNum1 = document.querySelector("#num1")
    var oSign = document.querySelector("#sign")
    var oNum2 = document.querySelector("#num2")
    var oResult = document.querySelector("#result")
    var oBtn = document.querySelector(".btn")
    oBtn.onclick = function(){
      var num1 = Number(oNum1.value);
      var sign = oSign.value;
      var num2 = Number(oNum2.value);
      oResult.value = count(num1,num2,sign)
    }
    function count(a,b,s){
      var n = 0;
      switch(s){
        case "+":n = a + b;break;
        case "-":n = a - b;break;
        case "*":n = a * b;break;
        case "/":n = a / b;break;
      }
      return n;
    }


  </script>
</body>
</html>